<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>音乐-随你听</title>
    <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
    <style type="text/css">
    	body{margin:0;padding:0}.el-container{max-width:1200px;margin:0 auto}.el-menu-item{width:25%;text-align:center;font-size:1.075rem}.el-scrollbar__wrap{overflow-x:hidden}.el-tag{margin:5px 10px;cursor:pointer}.search-title{margin:10px 0 5px 10px}.singer-intro{margin-top:30px}.singer-intro2{font-size:.9em;color:rgba(0,0,0,0.5)}.colColor{color:rgba(0,0,0,0.4)}.el-icon-s-operation,.el-icon-tickets{font-size:1.1rem}.el-icon-s-operation:hover,.el-icon-tickets:hover{color:#409eff}[v-cloak]{display: none;}.aplayer-lrc-current{color: #409EFF !important;font-size: 1rem !important;letter-spacing:0.1rem !important;font-weight:bold !important;}
    </style>
    <link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
</head>
<body>
    <div id="app">

        <el-dialog v-if="dialogVisible" v-cloak title="免责申明" :visible.sync="dialogVisible" :before-close="handleClose">
            <span>一、本网站是出于兴趣爱好所编写，仅供学习所用，不作任何商业用途；<br>二、本网站所有api均来自QQ音乐，本站不具备站内所有作品的版权，使用站内资源时请遵循相关法律法规。</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>


        <el-container ref="homePage" v-loading="loading">

            <el-header v-show="!showSearchPage" style="margin: 0;padding: 0">
                <el-menu :default-active="activeIndex" class="el-menu-demo" v-cloak mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">人气推荐</el-menu-item>
                    <el-menu-item index="2">新歌上架</el-menu-item>
                    <el-menu-item index="3">抖音热歌</el-menu-item>
                    <el-menu-item index="4">搜索</el-menu-item>
                </el-menu>
            </el-header>
            <el-header v-if="showSearchPage">
                <el-row>
                    <el-button icon="el-icon-back" circle @click="closeSearchPage" style="margin-top:10px"></el-button>
<!--                    <el-divider></el-divider>-->
                </el-row>
            </el-header>
            <el-main ref="scrollDom">
                <section v-if="activeIndex == 1" style="height:100%">
                    <el-table :data="peakKtvSongs" @row-click="playSong" v-loading="firstLoading.peakKtv">
                        <el-table-column label="专辑图片">
                            <template v-slot="scope">
                                <el-image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+scope.row.data.albummid+'.jpg'" lazy style="width: 4em">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                    <div slot="error" class="image-slot">
                                        <el-image src="lib/img/default_album.png" style="width: 4em"></el-image>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="data.songname" label="歌曲"></el-table-column>
                        <el-table-column label="歌手" class-name="colColor">
                            <template slot-scope="scope">
                                <template v-for="(s,index) in scope.row.data.singer">
                                    {{s.name}}
                                    <span v-if="scope.row.data.singer.length != index+1">/</span>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column prop="data.albumname" label="专辑" class-name="colColor"></el-table-column>
                    </el-table>
<!--                    <el-row style="height: 60px;"></el-row>-->
                </section>
                <section v-show="activeIndex == 2" style="height: 100%">
                    <el-table :data="peakNewSongs" @row-click="playSong" v-loading="firstLoading.peakNew">
                        <el-table-column label="专辑图片">
                            <template slot-scope="scope">
                                <el-image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+scope.row.data.albummid+'.jpg'" style="width: 4em">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                    <div slot="error" class="image-slot">
                                        <el-image src="lib/img/default_album.png" style="width: 4em"></el-image>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="data.songname" label="歌曲"></el-table-column>
                        <el-table-column label="歌手" class-name="colColor">
                            <template v-slot="scope">
                                <template v-for="(s,index) in scope.row.data.singer">
                                    {{s.name}}
                                    <span v-if="scope.row.data.singer.length != index+1">/</span>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column prop="data.albumname" label="专辑" class-name="colColor"></el-table-column>
                    </el-table>
<!--                    <el-row style="height: 60px;"></el-row>-->
                </section>
                <section v-show="activeIndex == 3" style="height: 100%">
                    <el-table :data="peakDouyinSongs" @row-click="playSong" v-loading="firstLoading.peakDouyin">
                        <el-table-column label="专辑图片">
                            <template slot-scope="scope">
                                <el-image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+scope.row.album.mid+'.jpg'" style="width: 4em">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                    <div slot="error" class="image-slot">
                                        <el-image src="lib/img/default_album.png" style="width: 4em"></el-image>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="歌曲"></el-table-column>
                        <el-table-column label="歌手" class-name="colColor">
                            <template v-slot="scope">
                                <template v-for="(s,index) in scope.row.singer">
                                    {{s.name}}
                                    <span v-if="scope.row.singer.length != index+1">/</span>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column prop="album.name" label="专辑" class-name="colColor"></el-table-column>
                    </el-table>
                    <!--                    <el-row style="height: 60px;"></el-row>-->
                </section>
                <section v-show="activeIndex == 4" style="height: 100%">
                    <section v-cloak v-show="!showSearchPage">
                        <el-input clearable placeholder="请输入内容" v-model="keyword" class="music-search">
                            <el-button slot="append" icon="el-icon-search" type="primary" plain @click="search()"></el-button>
                        </el-input>
                        <el-row class="search-title">热门搜索</el-row>
                        <el-row>
                            <el-tag type="danger" effect="plain" @click="hotkeySearch(hotkeys.special_key)">{{hotkeys.special_key}}</el-tag>
                            <el-tag type="info" v-for="(item,index) in hotkeys.hotkey" effect="plain" :key="index" @click="hotkeySearch(item.k)">{{item.k}}</el-tag>
                        </el-row>
                        <el-row style="height: 50px"></el-row>
                    </section>
                    <section v-cloak v-show="showSearchPage" style="height:100%">
                        <el-row v-if="hasSingerIntro" :gutter="40">
                            <el-col :xs="8" :md="3">
                                <el-image :src="singerIntro.singerPic" style="border-radius: 50%;">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </el-col>
                            <el-col :xs="16" :md="21">
                                <el-row>
                                    <el-col class="singer-intro" :xs="18" :sm="6" :md="7">歌手:{{singerIntro.singerName}}</el-col>
                                    <el-col class="singer-intro singer-intro2" :xs="7" :sm="4" :md="4">歌曲:{{singerIntro.songNum}}</el-col>
                                    <el-col class="singer-intro singer-intro2" :xs="6" :sm="4" :md="4">专辑:{{singerIntro.albumNum}}</el-col>
                                    <el-col class="singer-intro singer-intro2" :xs="6" :sm="4" :md="4">MV:{{singerIntro.mvNum}}</el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-divider v-if="hasSingerIntro"></el-divider>
                        <el-table :data="searchSongs" @row-click="playSong" v-loading="firstLoading.search">
                            <el-table-column label="专辑图片">
                                <template slot-scope="scope">
                                    <el-image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+scope.row.albummid+'.jpg'" lazy style="width: 4em">
                                        <div slot="placeholder" class="image-slot">
                                            加载中<span class="dot">...</span>
                                        </div>
                                        <div slot="error" class="image-slot">
                                            <el-image src="lib/img/default_album.png" style="width: 4em"></el-image>
                                        </div>
                                    </el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="songname" label="歌曲"></el-table-column>
                            <el-table-column label="歌手">
                                <template v-slot="scope">
                                    <template v-for="(s,index) in scope.row.singer">
                                        {{s.name}}
                                        <span v-if="scope.row.singer.length != index+1">/</span>
                                    </template>
                                </template>
                            </el-table-column>
                            <el-table-column prop="albumname" label="专辑"></el-table-column>
                        </el-table>
                        <el-row style="text-align:center; height: 20px;line-height: 20px;color:#909399" v-if="currentPage>=pages">没有更多了</el-row>
                    </section>
                </section>
            </el-main>
        </el-container>
        <div id="aplayer"></div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.9.1/qs.min.js"></script>
    <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
    <script type="text/javascript">
    	(function (){
    		const host = 'http://47.102.45.6';
			// const host = 'http://127.0.0.1';
    	    const vm = new Vue({
    	        el: '#app',
    	        data() {
    	            return {
    	                urlHash:['recommend','new','douyin','search'],
    	                dialogVisible:true,
    	                aplayer:{},
    	                clientHeight:'',
    	                activeIndex: '1',
    	                keyword:'',
    	                hotkeys:{},
    	                singerIntro:{},
    	                hasSingerIntro:false,
    	                showSearchPage:false,
    	                searchSongs:[],
    	                peakKtvSongs:[],
    	                peakNewSongs:[],
    	                peakDouyinSongs:[],
    	                playList:[{
    	                    songid:"",
    	                    songmid:'',
    	                    name:'',
    	                    artist:'',
    	                    cover:'',
    	                    url:'',
    	                    lrc:"暂无歌词"
    	                }],
    	                curSongIndex:0,
    	                loading:false,
    	                firstLoading:{
    	                    peakKtv:false,
    	                    peakNew:false,
    	                    search:false,
    	                    peakDouyin:false
    	                },
    	                pages:1,
    	                currentPage:1,
    	                pageSize:20,
    	                music:{
    	                    isPlay:false,
    	                    currentTime:0,
    	                    maxTime:0,
    	                    volume:100
    	                },
    	                err:0
    	            };
    	        },
    	        methods: {
    	            browserChangeFixed(clientHeight){ //动态修改样式
    	                this.$refs.homePage.$el.style.height = clientHeight-20+'px';
    	            },
    	            handleSelect(key) {
    	                window.location.hash = this.urlHash[parseInt(key)-1];
    	                vm.$refs.scrollDom.$el.scrollTop = 0;
    	                this.activeIndex = key;
    	            },
    	            search(){
    	                this.showSearchPage = true;
    	                vm.firstLoading.search = true;
    	                axios.get(host+'/music/search',{
    	                    params: {
    	                        keyword: vm.keyword,
    	                        page:1,
    	                        num:vm.pageSize
    	                    }
    	                }).then(function (response) {
    	                    // console.log(response);
    	                    response = JSON.parse(response.data.result);
    	                    // console.log("search=",response.data.song);
    	                    vm.currentPage = response.data.song.curpage;
    	                    vm.pages = Math.ceil(parseInt(response.data.song.totalnum)/vm.pageSize);
    	
    	                    // console.log("cur="+vm.currentPage,vm.pages);
    	                    // console.log("loading="+vm.loading,"disabled="+vm.disabled());
    	                    vm.searchSongs = response.data.song.list;
    	                    // console.log(vm.songs.length);
    	                    if (response.data.zhida.type=='1') {
    	                        vm.hasSingerIntro = true;
    	                        // console.log(vm.hasSingerIntro);
    	                        vm.singerIntro = response.data.zhida.zhida_singer;
    	                    }else{
    	                        vm.hasSingerIntro = false;
    	                    }
    	                    vm.firstLoading.search = false;
    	                }).catch(function (error) {
    	                    vm.$message.error('网络错误');
    	                });
    	            },
    	            load(){
    	                if (this.currentPage<this.pages) {
    	                    this.loading = true;
    	                    axios.get(host+'/music/search',{
    	                        params: {
    	                            keyword: vm.keyword,
    	                            page:vm.currentPage+1,
    	                            num:vm.pageSize
    	                        }
    	                    }).then(function (response) {
    	                        // console.log(response);
    	                        response = JSON.parse(response.data.result);
    	                        // console.log("load=",response.data.song);
    	                        vm.currentPage = response.data.song.curpage;
    	                        // console.log("cur="+vm.currentPage,vm.pages);
    	                        response.data.song.list.forEach(function (item) {
    	                            vm.searchSongs.push(item);
    	                        });
    	                        vm.loading = false;
    	
    	                    }).catch(function (error) {
    	                        vm.$message.error('网络错误');
    	                    });
    	                }
    	            },
    	            getScroll(e) {
    	
    	                // this.scrollTop[this.activeIndex-1] = e.target.scrollTop;
    	
    	                if (this.activeIndex==4&&this.showSearchPage) {
    	                    // 滚动条距离底部的距离scrollBottom
    	                    let scrollBottom =e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight;
    	                    if (scrollBottom < 5) {
    	                        e.target.scrollTop-=50;
    	                        this.load();
    	                    }
    	                }
    	            },
    	            getHotkey(){
    	                axios.get(host+'/music/hotkey').then(function (response) {
    	                    vm.hotkeys = JSON.parse(response.data.result).data;
    	                    // console.log(response.data.result)
    	                }).catch(function (error) {
    	                    vm.$message.error('网络错误');
    	                });
    	            },
    	            handleClose(done){
    	                this.hasSingerIntro = false;
    	                done();
    	            },
    	            hotkeySearch(hotkey){
    	                this.keyword = hotkey;
    	                this.search();
    	            },
    	            closeSearchPage(){
    	                this.showSearchPage = false;
    	                this.searchSongs = [];
    	            },
    	            peakKtv(){
    	                this.firstLoading.peakKtv = true;
    	                axios.get(host+'/music/peak-ktv').then(function (response) {
    	                    response = JSON.parse(response.data.result);
    	                    vm.peakKtvSongs = response.songlist;
    	                    vm.firstLoading.peakKtv = false;
    	                    // console.log(vm.peakKtvSongs);
    	                }).catch(function (error) {
    	                    vm.$message.error('网络错误');
    	                });
    	            },
    	            peakNew(){
    	                this.firstLoading.peakNew = true;
    	                axios.get(host+'/music/peak-new').then(function (response) {
    	                    response = JSON.parse(response.data.result);
    	                    vm.peakNewSongs = response.songlist;
    	                    vm.firstLoading.peakNew = false;
    	                    // console.log(vm.peakKtvSongs);
    	                }).catch(function (error) {
    	                    vm.$message.error('网络错误');
    	                });
    	            },
    	            peakDouyin(){
    	                this.firstLoading.peakDouyin = true;
    	                axios.get(host+'/music/peak-douyin').then(function (response) {
    	                    // console.log(response);
    	                    let data = response.data;
    	                    // if(data.detail==undefined){
    	                    //     vm.err++;
    	                    //     if (vm.err<=5){
    	                    //         vm.peakDouyin();
    	                    //     }
    	                    // }else {
    	                    try {
    	                        vm.peakDouyinSongs = data.detail.data.songInfoList;
    	                    }catch (e) {}
    	                    vm.firstLoading.peakDouyin = false;
    	                        // console.log(vm.peakKtvSongs);
    	                    // }
    	                }).catch(function (error) {
    	                    vm.$message.error('网络错误');
    	                    // console.log('dy');
    	                });
    	            },
    	            playSong(row){
    	                // let flag = true;//peak
    	                // try{
    	                //     row.data.songmid;
    	                // }catch (e) {//search
    	                //     flag = false
    	                // }
    	                // if (flag){//peak
    	                //     row = row.data;
    	                // }
    	
    	                if (this.activeIndex==1||this.activeIndex==2){
    	                    row = row.data;
    	                }else if (this.activeIndex==3) {
    	                    row.songmid = row.mid;
    	                    row.songname = row.name;
    	                    row.albummid = row.album.mid;
    	                    row.songid = row.id;
    	                }
    	
    	                for (var i = 0; i < vm.playList.length; i++) {
    	                    if (vm.playList[i].songmid==row.songmid){
    	                        if (vm.playList[i].url==''){
    	                            vm.$message('歌曲无版权');
    	                        }else {
    	                            vm.curSongIndex = i;
    	                            this.aplayer.list.switch(i-1);
    	                            this.aplayer.play();
    	                        }
    	                        return;
    	                    }
    	                }
    	                axios.get(host+'/music/song/'+row.songmid).then(function (response) {
    	                    // console.log(row.songname);
    	                    if (response.data.result==''){
    	                        vm.$message('歌曲无版权');
    	                        // console.log(123);
    	                        return;
    	                    }else {
    	                        vm.curSongIndex = vm.playList.length;
    	                    }
    	                    let singers = "";
    	                    row.singer.forEach(function (item) {
    	                        // console.log(item.name);
    	                        singers = singers+item.name+"/";
    	                    });
    	                    singers = singers.substring(0,singers.length-1);
    	                    vm.playList.push({
    	                        songmid : row.songmid,
    	                        name : row.songname,
    	                        url : response.data.result,
    	                        cover : 'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+row.albummid+'.jpg',
    	                        artist : singers,
    	                        songid:row.songid
    	                    });
    	                    setTimeout(function () {
    	                        try{
    	                            vm.aplayer.list.add([vm.playList[vm.curSongIndex]]);
    	
    	                            if (vm.curSongIndex>1){
    	                                // vm.aplayer.skipForward();
    	                                vm.aplayer.list.switch(vm.aplayer.list.audios.length-1);
    	                            }
    	                            vm.aplayer.play();
    	                        }catch (e) {
    	                        }
    	                    },300);
    	                    vm.getLyric();
    	                }).catch(function (error) {
    	                    vm.$message.error('网络错误');
    	                });
    	            },
    	            asciiChange(lyric){
    	
    	                lyric = lyric.replace(/&#13;/g,'\n');
    	                lyric = lyric.replace(/&#10;/g,'\r');
    	
    	                lyric = lyric.replace(/&#32;/g,' ');
    	                lyric = lyric.replace(/&#33;/g,'!');
    	                lyric = lyric.replace(/&#34;/g,'"');
    	                lyric = lyric.replace(/&#36;/g,'$');
    	                lyric = lyric.replace(/&#37;/g,'%');
    	                lyric = lyric.replace(/&#39;/g,"'");
    	                lyric = lyric.replace(/&#40;/g,'(');
    	                lyric = lyric.replace(/&#41;/g,')');
    	                lyric = lyric.replace(/&#42;/g,'*');
    	                lyric = lyric.replace(/&#43;/g,'+');
    	                lyric = lyric.replace(/&#44;/g,',');
    	                lyric = lyric.replace(/&#45;/g,'-');
    	                lyric = lyric.replace(/&#46;/g,'.');
    	                lyric = lyric.replace(/&#47;/g,'/');
    	                lyric = lyric.replace(/&#58;/g,':');
    	                lyric = lyric.replace(/&#60;/g,'<');
    	                lyric = lyric.replace(/&#61;/g,'=');
    	                lyric = lyric.replace(/&#62;/g,'>');
    	                lyric = lyric.replace(/&#63;/g,'?');
    	                lyric = lyric.replace(/&#64;/g,'@');
    	                lyric = lyric.replace(/&#92;/g,'\\');
    	
    	                lyric = lyric.replace(/&#94;/g,'^');
    	                lyric = lyric.replace(/&#95;/g,'_');
    	                lyric = lyric.replace(/&#96;/g,'`');
    	                lyric = lyric.replace(/&#123;/g,'{');
    	                lyric = lyric.replace(/&#124;/g,'|');
    	                lyric = lyric.replace(/&#125;/g,'}');
    	                lyric = lyric.replace(/&#126;/g,'~');
    	
    	
    	                lyric = lyric.replace(/&#35;/g,'#');
    	                lyric = lyric.replace(/&#38;/g,'&');
    	                lyric = lyric.replace(/&#91;/g,'[');
    	                lyric = lyric.replace(/&#93;/g,']');
    	                lyric = lyric.replace(/&#59;/g,';');
    	                return lyric;
    	            },
    	            getLyric(){
    	                let songmid = vm.playList[vm.curSongIndex].songmid;
    	                let songid = vm.playList[vm.curSongIndex].songid;
    	                if (songmid==''||songid==''){
    	                    return;
    	                }
    	                axios.get(host+'/music/lyric',{
    	                    params:{
    	                        songid:songid,
    	                        songmid:songmid
    	                    }
    	                }).then(function (response) {
    	
    	                    let lyric = JSON.parse(response.data.result).lyric;
    	
    	                    if (lyric==undefined){
    	                        return;
    	                    }
    	
    	                    vm.playList[vm.curSongIndex].lrc = vm.asciiChange(lyric);
    	
    	                    // console.log(JSON.stringify(vm.playList));
    	                    // console.log(vm.curSongIndex);
    	                }).catch(function (error) {
    	                    // console.log(222)
    	                });
    	            }
    	        },
    	        created(){
    	            let urlHash = window.location.hash;
    	            switch (urlHash) {
    	                case '#new':
    	                    this.activeIndex = '2';;break;
    	                case '#douyin':
    	                    this.activeIndex = '3';break;
    	                case '#search':
    	                    this.activeIndex = '4';break;
    	                default :
    	                    this.activeIndex = '1';break;
    	            }
    	            this.dialogVisible = (this.activeIndex == '1');
    	            this.getHotkey();
    	            this.peakKtv();
    	            this.peakNew();
    	            this.peakDouyin();
    	        },
    	        mounted(){
    	            // 获取浏览器可视区域高度
    	            this.clientHeight =   `${document.documentElement.clientHeight}`;
    	
    	            window.onresize = function temp() {
    	                this.clientHeight = `${document.documentElement.clientHeight}`;
    	            };
    	
    	            this.aplayer = new APlayer({
    	                container: document.getElementById('aplayer'),
    	                lrcType: 1,
    	                fixed: true,
    	                autoplay:true,
    	                listFolded: true,
    	                listMaxHeight: 90,
    	                audio: []
    	            });
    	            this.aplayer.disableVersionBadge = true;
    	
    	            this.$nextTick(function () {
    	                vm.$refs.scrollDom.$el.addEventListener('scroll',vm.getScroll);
    	            });
    	        },
    	        watch: {
    	            // 如果 `clientHeight` 发生改变，这个函数就会运行
    	            clientHeight: function () {
    	                this.browserChangeFixed(this.clientHeight)
    	            },
    	        }
    	    });
    	})();
    </script>
</body>
</html>